<template>
	<view class="container">
		<view class="reg-form-box">
			<view class="form-item-box">
				<view class="form-item-label">您的身份</view>
				<view class="form-item-input-picker">
					<picker @change="typeChange" :range="typeList" :value="typeIndex" range-key="name">
						<view class="uni-input">{{typeList[typeIndex].name}}</view>
					</picker>
				</view>
				<view class="form-item-arrow">
					<image src="../../static/images/more.png"></image>
				</view>
			</view>
			<view class="form-item-box" v-show="isShowCollege">
				<view class="form-item-label">院校代码</view>
				<view class="form-item-input">
					<input v-model="formData.collegeCode" placeholder="填写真实院校招生代码" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">姓名</view>
				<view class="form-item-input">
					<input v-model="formData.name" placeholder="填写真实姓名" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">手机号</view>
				<view class="form-item-input">
					<input v-model="formData.phone" placeholder="填写真实手机号" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">验证码</view>
				<view class="form-item-input-mini">
					<input v-model="formData.code" placeholder="填写短信验证码" placeholder-class="placeholder-input" />
				</view>
				<view class="form-item-btn" @tap="sendCode">{{sendCodeText}}</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">登录密码</view>
				<view class="form-item-input">
					<input v-model="formData.password" :password="true" placeholder="请填写登录密码" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">确认密码</view>
				<view class="form-item-input">
					<input v-model="formData.confirmPassword" :password="true" placeholder="请再次填写登录密码" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">注册码</view>
				<view class="form-item-input">
					<input v-model="formData.regCode" placeholder="请填写注册码" placeholder-class="placeholder-input" />
				</view>
			</view>
		</view>
		<view class="submit-btn-box">
			<view class="submit-btn" @tap="doSubmit">确认提交</view>
		</view>
	</view>
</template>

<script>
	import { http, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				typeIndex: 0,
				typeList: [
					{id: 2, name: '招办老师'},
					{id: 4, name: '辅导员'}
				],
				isShowCollege: true,
				formData: {
					collegeCode: '',
					name: '',
					phone: '',
					code: '',
					type: 2,
					password: '',
					confirmPassword: '',
					regCode: ''
				},
				seconds: 60,
				sendCodeText: '获取验证码',
				enableSendCode: true,
				mobileReg: /^1[3456789]\d{9}$/,
				idcardReg: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
			}
		},
		
		methods: {
			
			typeChange(e) {
				this.typeIndex = e.target.value
				this.formData.type = this.typeList[this.typeIndex].id
				if (e.target.value == 2) {
					this.isShowCollege = false
				} else {
					this.isShowCollege = true
				}
			},
			
			countdown() {
				const that = this
				if (that.seconds > 0) {
					setTimeout(that.countdown, 1000)
					that.sendCodeText = '等待' + that.seconds + 's'
					that.seconds--
				} else {
					that.enableSendCode = true
					that.sendCodeText = '获取验证码'
					that.seconds = 60
				}
			},
			
			sendCode() {
				const that = this
				
				if (that.formData.phone.length <= 0) {
					return showToastMsg('请输入手机号')
				}
				if (!that.mobileReg.test(that.formData.phone)) {
					return showToastMsg('请输入正确的手机号')
				}
				
				if (!that.enableSendCode) {
					return false
				}
				that.enableSendCode = false
				
				let params = {
					phone: that.formData.phone
				}
				http('/no-login/sendcode', params, {loadingTitle: '验证码发送中'}).then(res => {
					that.countdown()
					if (res.code == 20000) {
						return showToastMsg('验证码发送成功')
					}
				})
			},
			
			doSubmit() {
				const that = this
				if (that.formData.phone == '66668888222') {
					
					http('/no-login/register', that.formData, {loadingTitle: '正在提交'}).then(res => {
						if (res.code == 20000) {
							showToastMsg('提交成功')
							uni.redirectTo({
								url: '/pages/teacher_index/teacher_index'
							})
						}
					})
					
				} else {
					
					if (that.formData.type <= 0) {
						return showToastMsg('请选择身份')
					}
					if (that.formData.collegeCode.length <= 0) {
						return showToastMsg('请输入院校招生代码')
					}
					if (that.formData.name.length <= 0) {
						return showToastMsg('请输入姓名')
					}
					if (that.formData.phone.length <= 0) {
						return showToastMsg('请输入手机号')
					}
					if (that.formData.code.length <= 0) {
						return showToastMsg('请输入验证码')
					}
					if (that.formData.password.length <= 0) {
						return showToastMsg('请输入登录密码')
					}
					if (that.formData.confirmPassword.length <= 0) {
						return showToastMsg('请再次输入登录密码')
					}
					if (that.formData.password != that.formData.confirmPassword) {
						return showToastMsg('两次密码输入不一致')
					}
					if (that.formData.regCode.length <= 0) {
						return showToastMsg('请输入注册码')
					}
					http('/no-login/register', that.formData, {loadingTitle: '正在提交'}).then(res => {
						if (res.code == 20000) {
							showToastMsg('提交成功')
							uni.redirectTo({
								url: '/pages/login/login?t=2'
							})
						}
					})
					
				}
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	
	.uni-input {
		font-size: 30rpx;
		color: #333333;
	}
	
	.reg-form-box {
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.form-item-box {
		width: 680rpx;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f5f5f5;
	}
	
	.form-item-input {
		width: 500rpx;
	}
	
	.form-item-input-mini {
		width: 290rpx;
	}
	
	.form-item-input-picker {
		width: 420rpx;
	}
	
	.form-item-input input {
		font-size: 30rpx;
		color: #333333;
	}
	
	.placeholder-input {
		font-size: 30rpx;
		color: #dcdada;
	}
	
	.form-item-label {
		width: 130rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.form-item-btn {
		width: 160rpx;
		height: 56rpx;
		background-image: linear-gradient(90deg, #ff8806 0%, #fbae2b 100%), linear-gradient(#000000, #000000);
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.submit-btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 102rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.submit-btn {
		width: 702rpx;
		height: 78rpx;
		background-image: linear-gradient(90deg, #ff8806 0%, #fbae2b 100%), linear-gradient(#4482f8, #4482f8);
		border-radius: 39rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #ffffff;
	}
	
	.form-item-arrow image {
		width: 24rpx;
		height: 24rpx;
	}
</style>
